<template>
  <el-form-item class="edit-item edit-item-color color-normal" :label="label">
    <el-color-picker
      v-model="modelValue"
      @active-change="onChange($event)"
      @change="onChange($event)"
      size="small"
      :disabled="disabled"
      :show-alpha="isAlpha"
      :color-format="format"
      :predefine="predefine">
    </el-color-picker>
  </el-form-item>
</template>

<script setup lang="ts">
import TooltipCommon from './tooltip-common.vue'

interface Props {
  modelValue: string | number,
  label: string,
  format?: string,
  isAlpha?: boolean,
  disabled?: boolean
}
const props = withDefaults(defineProps<Props>(), {
  modelValue: 'rgba(0, 0, 0, 0)',
  format: 'rgba',
  isAlpha: true
})

const predefine = [
  "#FFFFFF",
  "#000000",
  "#333333",
  "#B8E986",
  "#D0021B",
  "#F5A623",
  "#F8E71C",
  "#7ED321",
  "#127BFF",
  "#BD10E0",
  "#9013FE",
  "#1DA1F2",
  "#3DD596"
]
const emit = defineEmits(['change','update:modelValue'])
const onChange = (val: string) => {
  if(!val) {
    val = 'rgba(0, 0, 0, 0)'
  }
  emit('update:modelValue', val)
  emit('change', val)
}
</script>

<style lang="scss">
  .el-color-picker__mask {
    width: 100% !important;
  }
</style>
